<script setup>
import { onMounted, ref } from 'vue'
import autofit from 'autofit.js'

const A = ref(null)

// 防抖函数
// const debounce = (fn, delay) => {
//   let timer = null
//   return function () {
//     if (timer) clearTimeout(timer)
//     timer = setTimeout(() => {
//       fn.apply(this, arguments)
//     }, delay)
//   }
// }
// const autoScale = () => {
//   const width = 1920
//   const height = 929
//   A.value.style.transformOrigin = 'left top'

//   function init() {
//     const salceX = innerWidth / width
//     const salceY = innerHeight / height
//     const salce = Math.min(salceX, salceY)

//     const top = (innerHeight - height * salce) / 2
//     const left = (innerWidth - width * salce) / 2

//     A.value.style.transform = `translate(${left}px,${top}px) scale(${salce})`

//     console.log('salceX', salceX)
//     console.log('salceY', salceY)
//   }
//   init()
// }

// window.onresize = () => {
//   autoScale()
// }
onMounted(() => {
  autofit.init(
    {
      dh: 929,
      dw: 1920,
      el: '#container',
      resize: true
    },
    false
  )
})
</script>

<template>
  <div id="container" ref="A">
    <div class="left">1212</div>
    <div class="main">123123</div>
    <div class="right">12312312</div>
  </div>
</template>

<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
  // background-color: pink;
  display: flex;
  .left {
    width: 25%;
    height: 100%;
    background-color: #b598a1;
  }
  .main {
    width: 50%;
    height: 100%;
    background-color: #806d9e;
  }
  .right {
    width: 25%;
    height: 100%;
    background-color: #5e616d;
  }
}
</style>
